<template>
  <div class="createPost-container">
    <el-form
      ref="postForm"
      :model="postForm"
      :rules="rules"
      class="form-container"
      :disabled="isView"
    >
      <div class="createPost-main-container">
        <el-row gutter="80">
          <el-col :span="24">
            <div class="postInfo-container">
              <el-row>
                <el-form-item
                  style="margin-bottom: 40px"
                  prop="projectDeclareName"
                  label-width="180px"
                  label="项目申报标题："
                >
                  <el-input
                    v-model="postForm.projectDeclareName"
                    :maxlength="100"
                    name="name"
                    required
                    placeholder="请输入项目申报标题"
                  >
                  </el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item
                  style="margin-bottom: 40px"
                  label-width="180px"
                  label="项目申报说明："
                >
                  <el-input
                    v-model="postForm.projectDeclareDescription"
                    type="textarea"
                    class=""
                    :autosize="{ minRows: 4, maxRows: 8 }"
                    placeholder="请输入项目申报说明"
                  />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item
                    label-width="180px"
                    label="项目来源："
                    prop="projectSource"
                >
                  <el-select
                      v-model="postForm.projectSource"
                      filterable
                      remote
                      placeholder="请选择项目来源"
                      :loading="loading"
                  >
                    <el-option
                        v-for="item in sourceListOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item
                    label-width="180px"
                    label="项目级别："
                    prop="projectLevel"
                >
                  <el-select
                      v-model="postForm.projectLevel"
                      filterable
                      remote
                      placeholder="请选择项目级别"
                      :loading="loading"
                  >
                    <el-option
                        v-for="item in levelListOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>

              <el-row>
              <el-form-item
                  label-width="180px"
                  label="报名开始/结束时间:"
                  prop="dateRange"
                >
                  <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="请选择开始时间"
                    end-placeholder="请选择结束时间"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
              </el-form-item>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>

        <el-button
          v-show="!isView"
          v-loading="loading"
          style="margin-left: 230px; width: 100px"
          type="success"
          @click="submitForm"
        >
          保存
        </el-button>
    </el-form>
  </div>
</template>

<script>
import {
  fetchProjectDeclareById,
  createProjectDeclare,
  updateProjectDeclare,
} from "@/api/project-declare";
import sourceList from "@/data/projectSources";
import levelList from "@/data/projectLevels";

const defaultForm = {
  projectDeclareName: "", // 项目申报标题
  projectDeclareDescription: "", // 项目申报说明
  projectDeclareStart: "", // 项目申报开始时间
  projectDeclareEnd: "", // 项目申报结束时间
  projectSource: "", // 项目来源
  projectLevel: "", // 项目级别
  id: undefined,
};

export default {
  name: "ProjectDeclareDetail",
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    isView: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("此为必填项"));
      } else {
        callback();
      }
    };

    return {
      postForm: Object.assign({}, defaultForm),
      loading: false,
      dateRange: [],
      fromDate: null,
      userListOptions: [],
      pickerOptions: {
        disabledDate: this.disabledDate,
        onPick: this.pick,
      },
      rules: {
        projectDeclareName: [{ required: true, validator: validateRequire }],
        dateRange: [{ required: true, validator: validateRequire }],
        projectLevel: [{ required: true, validator: validateRequire }],
        projectSource: [{ required: true, validator: validateRequire }],
      },
      sourceListOptions: sourceList,
      levelListOptions: levelList,
    };
  },
  created() {
    if (this.isEdit || this.isView) {
      const id = this.$route.params && this.$route.params.id;
      this.fetchData(id);
    }
  },
  methods: {
    fetchData(id) {
        fetchProjectDeclareById(id)
        .then((res) => {
          this.postForm = res.data[0];
          this.dateRange = [
            this.postForm.projectDeclareStart,
            this.postForm.projectDeclareEnd,
          ];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    pick({ maxDate, minDate }) {
      this.fromDate = minDate;
      this.postForm.projectDeclareStart = minDate;
      this.postForm.projectDeclareEnd = maxDate;
    },
    disabledDate(date) {
      if (date < new Date(Date.now()).setHours(0, 0, 0, 0)) return true;
      if (this.fromDate) {
        return this.fromDate > date;
      }
      return false;
    },
    submitForm() {
      console.log(this.postForm);
      this.$refs.postForm.validate((valid) => {
        if (!this.postForm.projectDeclareStart || !this.postForm.projectDeclareEnd) {
          this.$message({
            message: "请选择开始/结束时间段",
            type: "error",
          });
        }
        if (valid) {
          this.loading = true;
          if (this.postForm.id) {
            updateProjectDeclare(this.postForm.id, this.postForm)
              .then((res) => {
                if (res.data) {
                  this.$router.push("/projectdeclare/list");
                  this.$message({
                    title: "成功",
                    message: "项目申报信息更新成功",
                    type: "success",
                    duration: 2000,
                  });
                } else {
                  this.$message({
                    message: "项目申报信息更新失败",
                    type: "error",
                  });
                }
                this.loading = false;
              })
              .catch((err) => {
                this.loading = false;
              });
          } else {
            createProjectDeclare({
              ...this.postForm,
            })
              .then((res) => {
                if (res.data) {
                  this.$router.push("/projectdeclare/list");

                  this.$message({
                    title: "成功",
                    message: "项目申报信息创建成功",
                    type: "success",
                    duration: 2000,
                  });
                } else {
                  this.$message({
                    message: "项目申报信息创建失败",
                    type: "error",
                  });
                }
                this.loading = false;
              })
              .catch((err) => {
                this.loading = false;
              });
          }
        } else {
          console.log("项目申报信息保存失败");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>
